<!DOCTYPE>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>第一题不断变大的div</title>
</head>
<body>
  <div style="width: 20px;height: 20px;background: skyblue;"></div>

  
  <input type="button" value="点击试试" onclick="change()" />
  <script>
    var div = document.querySelector('div');
    console.log(div);
    // function run() {
    // 	var i = 1;
    // 	  var T =window.setInterval(function() {
    // 	  	if(i < 100) {
    // 	  		  	div.style.width = i + 'px';
    //                 div.style.height = i + 'px';
    // 	  	}
    //        i++;
    // 	  }, 25);
    //    }
    //    run();

     var btn= document.querySelector('input[type="button"]');
     console.log(btn)
       var times = 1;
  function change() {
    if (times % 2 == 0) {
    div.style.background = "red";
     }else if (times % 2 == !0) {
      div.style.background = "skyblue";
  }
   times++;
  }
 
  
    function run() {
    	var i = 1;
    	var step = -1;
    	   var T =window.setInterval(function() {
    	   	if(i === 1 || i === 100){
    	   		step *= -1;
    	   	}
           	i+=step;
           	div.style.width = i + "px";
            div.style.height = i + 'px';
       
       }, 25);
 }
 run();

  </script>
</body>
</html>